<template>
  <div style="margin-top: 50px">
    <el-card shadow="never" >
      
      <el-row>
        <el-col :span="24">
          <el-form :model="value" :rules="questionInfoRule" :inline="true" ref="questionInfoFormRef" label-width="120px"  size="mini">
            <el-form-item label="学科："  prop="subjectId" >
                <el-select v-model="value.subjectId" placeholder="请选择学科" >
                  <el-option
                    v-for="item in subjectOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="阶段：" prop="level" >
                <el-cascader v-model="value.level"
                    :options="levelOptions"
                    :props="props"
                    collapse-tags
                    ></el-cascader>
            </el-form-item>
            
      
            <el-form-item label="题型："  prop="typeId"  >
               <el-select v-model="value.typeId" placeholder="全部"  >
                  <el-option
                    v-for="item in typeOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
              </el-select>
            </el-form-item>
             <el-form-item label="难度：" prop="difStatus">
                <el-select v-model="value.difStatus" placeholder="全部" >
                  <el-option
                    v-for="item in difStatusOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
               </el-form-item>

             <el-form-item label="推荐程度："  prop="starStatus"> 
                <el-select v-model="value.starStatus" placeholder="全部" >
                  <el-option
                    v-for="item in starStatusOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
            </el-form-item>
              
              
            <el-form-item label="题目来源：" prop="sourceId">
                <el-select v-model="value.sourceId" filterable placeholder="全部" >
                  <el-option
                    v-for="item in sourceOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
            </el-form-item>

           

            <el-form-item label="有效状态：" v-if="!isUser">
                  <el-select v-model="value.validStatus" placeholder="全部" >
                    <el-option
                      v-for="item in validStatusOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
            </el-form-item>
            <el-form-item label="审核状态：" v-if="!isUser">
                  <el-select v-model="value.verifyStatus" placeholder="全部" >
                    <el-option
                      v-for="item in verifyStatusOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
            </el-form-item>

             <el-form-item label=" 题目附加说明：">
        
                  <el-input
                type="textarea"
                autosize
                placeholder="请输入内容"
                v-model="value.comment">
              </el-input>
                 
            </el-form-item>
            <el-form-item label="知识点：" size="small"  style="width: 600px" >
              <el-input
                placeholder="输入关键字进行过滤"
                v-model="filterKnowledgeText">
              </el-input>
                <el-tree
                  :props="treeprops"
                  :data="knowledgeOptions"
                  v-model="value.knowledge"
                  ref="mytree"
                  :expand-on-click-node="false"
                  node-key="id"
                  show-checkbox
                  :filter-node-method="filterKnowledgeNode"
                 >
                  <span class="custom-tree-node" slot-scope="{ node, data }">
                      <span style="font-size:12px">{{ node.label }}</span>
                      
            </el-button>
          </span>
        </span>
        </span>

    </el-tree>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    
      <el-row>
         <el-col :span="24">
          <el-button
                style="float: right;margin-right: 15px"
                @click=""
                type="primary"
                size="medium" @click="handleNext('questionInfoFormRef')">
                下一步，填写题目及答案
              </el-button>
         </el-col>
      </el-row>
    
    </el-card>
  </div>
</template>

<script>
  import {mapGetters} from 'vuex'
  import {fetchList as fetchTypeList} from '@/api/type'
  import {fetchList as fetchSourceList} from '@/api/source'
  import {fetchList as fetchKnowledgeList} from '@/api/knowledge'
  export default {
    name: "QuestionInfoDetail",
    props: {
      value: Object,
      isEdit: {
        type: Boolean,
        default: false
      },
      isDisabled:{
        type: Boolean,
        default: false
      }
    },
    
    


    data() {
      return {
       
        sourceOptions: [],//某一个学科下的试题来源和阶段下
        
        typeOptions:[], //某一个学科下所有题型
        knowledgeOptions:[], //某一学科下所有的知识点
        //知识点树的属性
        treeprops: {
              label: 'name',
              children: 'children',
              
        },
        filterKnowledgeText:null,
        //阶段状态的选项
        props: { multiple: true },

        questionInfoRule:{
          subjectId: [{required: true, message: '请选择学科', trigger: 'blur'}],
          level: [{required: true, message: '请选择阶段', trigger: 'blur'}], 
          sourceId: [{required: true, message: '请选择题目来源', trigger: 'blur'}], 
          typeId: [{required: true, message: '请选择题型', trigger: 'blur'}], 
          difStatus: [{required: true, message: '请选择难度', trigger: 'blur'}], 
          starStatus: [{required: true, message: '请选择推荐程度', trigger: 'blur'}], 
          
         
        },
       

      };
    },
    created() {
        
    },
    computed:{
      ...mapGetters([
          'subjectOptions',
          'allTypeOptions',
          'leaveLevelOptions',
          'levelOptions',
          'difStatusOptions',
          'starStatusOptions',
          'validStatusOptions',
          'verifyStatusOptions',
         
        ]),
      isUser(){
        
        return this.$store.getters.role===3
      },
    },
    watch: {
      filterKnowledgeText(val) {
        this.$refs.mytree.filter(val);
      },

      'value.subjectId': function(newVal,oldVal){
        setTimeout(()=>{
          this.subjectIdChanged(newVal)
        },1000)

      },
      
      'value.level': function(newVal,oldVal){
        setTimeout(()=>{
        
         this.getKnowledge(this.value.subjectId,newVal)
         this.getSourceList(this.value.subjectId,newVal)


        },1000)

      }

    },
   
    methods: {
      handleNext(formName){
       
       
      
        this.$refs[formName].validate((valid) => {
          if (valid) {
             //参数为true,只返回叶子节点 ,比如说[2,31]
            this.value.knowledge=this.$refs.mytree.getCheckedKeys(true)
            if (this.value.knowledge.length>0){
              this.$emit('nextStep');
            }else{
              this.$message({
              message: '请选择知识点',
              type: 'error',
              duration:1000
              });

            }
            
          } else {
            this.$message({
              message: '验证失败',
              type: 'error',
              duration:1000
            });
            return false;
          }
        });
      },
      filterKnowledgeNode(value, data) {
        if (!value) return true;
        
        return data.name.indexOf(value) !== -1;
      },


      subjectIdChanged(value){
       
        this.getTypeList(value);
        this.getSourceList(value,this.value.level)
        this.getKnowledge(value,this.value.level)
      },

      getKnowledge(subjectId,level){
         if (level===null) return
         if (level.length===0) return
         if (subjectId===null) return
         let levelParams=[]

          for (let i = 0; i < level.length; i++) {
                levelParams.push(level[i][level[i].length-1]);
          }


          fetchKnowledgeList({"subjectId":subjectId,"levelIds":levelParams.join(',')}).then(response=>{
                  
            this.knowledgeOptions=response.data.list;
            
            if (this.value.knowledge!=null)
              this.$refs.mytree.setCheckedKeys(this.value.knowledge,true)
           
                

          }).catch(error=>{

              console.log(error)

           })


      },

      getTypeList(subjectId) {
        fetchTypeList({"subjectId":subjectId}).then(response => {
          this.typeOptions = [];
          let typeList = response.data.list;
          for (let i = 0; i < typeList.length; i++) {
            this.typeOptions.push({label: typeList[i].name, value: typeList[i].id});
          }
        });
      },

       //获得某个学科的试题来源
      getSourceList(subjectId,level) {
        if (level===null) return
        if (level.length===0) return
        if (subjectId===null) return
        let levelParams=[]

        for (let i = 0; i < level.length; i++) {
                levelParams.push(level[i][level[i].length-1]);
        }

        fetchSourceList({"subjectId":subjectId,"levelIds":levelParams.join(',')}).then(response => {
          this.sourceOptions = [];

          let sourceList = response.data.list;
          for (let i = 0; i < sourceList.length; i++) {
            this.sourceOptions.push({label: sourceList[i].name, value: sourceList[i].id});
          }
        });
      },
     
    }
  }
</script>

<style scoped>
</style>
